﻿@model FrogFoot.Entities.Portal
@{
	ViewBag.Title = "Edit";
}

@using (Html.BeginForm("Edit", "Portals", FormMethod.Post, new { @enctype = "multipart/form-data", id = "editPortalForm" }))
{
	@Html.HiddenFor(x => x.PortalId)

	<div class="form-horizontal">
		<div class="row">
			<div class="col-sm-12">
				<h2>Create</h2>
                <span>Recommended image size: </span><label>1150 X 400px</label>
				@if (Model.CoverImage != null)
				{
					<div class="form-group" id="currentImage">
						<div class="col-sm-offset-2">
							<div class="col-sm-2">
								<img id="existingImage" src="~/Assets/PortalImage/@Model.CoverImage.AssetPath" alt="image" height="400" />
							</div>
						</div>
					</div>
				}

				<div class="form-group">
					<div id="uploadContainer" class="col-sm-offset-3 col-xs-9">
						<input id="ImgInput" type="file" name="upload" />
					</div>
				</div>

				<div class="form-group" id="imgPreviewContainer" style="display: none;">
					<div class="col-sm-offset-1 col-sm-8">
						<img id="imgPreview" height="400" />
					</div>
					<div class="col-sm-offset-1 col-sm-2">
						<input id="keepCurImg" style="margin-bottom: 30px;" type="button" class="btn btn-default" value="Revert image" />
						<div id="imgDetails"></div>
					</div>
				</div>

				<div class="form-group">
					@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-3" })
					<div class="col-md-9">
						@Html.TextBoxFor(model => model.Name, new {@class = "form-control"})
                        <label style="display: inline;"> + "FTTH Portal"</label>
						@Html.ValidationMessageFor(model => model.Name, "", new {@class = "text-danger"})
					</div>
				</div>

				<div class="form-group">
					@Html.LabelFor(model => model.PrecinctCode, new { @class = "control-label col-md-3" })
					<div class="col-md-9">
						@Html.TextBoxFor(model => model.PrecinctCode, new { @class = "form-control" })
						@Html.ValidationMessageFor(model => model.PrecinctCode, "", new { @class = "text-danger" })
					</div>
				</div>

				<div class="form-group">
					@Html.LabelFor(model => model.FacebookUrl, new { @class = "control-label col-md-3" })
					<div class="col-md-9">
						@Html.TextBoxFor(model => model.FacebookUrl, new { @class = "form-control" })
					</div>
				</div>

				<div class="form-group">
					@Html.LabelFor(model => model.TwitterUrl, new { @class = "control-label col-md-3" })
					<div class="col-md-9">
						@Html.TextBoxFor(model => model.TwitterUrl, new { @class = "form-control" })
					</div>
				</div>
				<hr />

			    <div class="form-group">
			        <div class="col-md-offset-2">
                        <span>URL Example: </span><label>constantiafibre.co.za</label> or <label>lynnwoodfibre.com</label>
			        </div>
			    </div>

				@foreach (var url in Model.Urls)
				{
					var i = 0;
					<div class="form-group clone url@(url.UrlId)">
						<label class="col-md-3 control-label">Referrer URL</label>
						<div class="col-md-3">
							<input class="hidden" name="Urls[@i].UrlId" value="@url.UrlId"/>
							<input class="hidden" name="Urls[@i].PortalId" value="@url.PortalId"/>
							<input class="form-control url" name="Urls[@i].URL" type="text" value="@url.URL"/>
						</div>
						<div class="col-md-2">
							<input type="button" class="btn btn-default deleteUrl" data-urlid="@url.UrlId" value="Delete"/>
						</div>
					</div>
					i++;
				}

				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-3">
						<input id="addUrl" class="btn btn-default" type="button" value="Add URL" />
					</div>
				</div>
				<hr />
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-3">
						<input class="btn btn-success" type="submit" value="Save" />
					</div>
				</div>
			</div>
		</div>
	</div>
}

@section Scripts{

	<script type="text/javascript">
		$(function () {
			//preview uploaded image
			function readURL(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();
					var file = input.files[0];
					reader.readAsDataURL(file);

					var image = new Image();

					reader.onload = function (e) {
						image.src = e.target.result;

						image.onload = function () {
							var w = this.width,
								h = this.height,
								s = ~~(file.size / 1024) + 'KB';
							$('#imgDetails').html("<p>width: " + w + "</p><p>height: " + h + "</p><p>size: " + s + "</p>");

							if (s > 2000) {
								alert.show("file size of " + s + " is too large. <br/> Recommended size is under 300 KB");
							}

							$('#imgPreview').attr('src', e.target.result);

							//set the package preview image to the uploaded image
							$('.logo').css('background', 'transparent url(' + e.target.result + ') center no-repeat');
							$('#imgPreviewContainer').show();
							$('#currentImage').hide();
						}
					}
				}
			}

			$("#uploadContainer").on('change', '#ImgInput', function () {
				readURL(this);
			});

			//keep new image; discard old
			$('#keepCurImg').on('click', function () {
				$('#uploadContainer').empty();
				$('#uploadContainer').html('<input id="ImgInput" type="file" name="upload" />');
				$('#imgPreviewContainer').hide();
				$('#currentImage').show();
			});

			var index = $('.clone').length;
			$('#addUrl').click(function () {
				var content = "<div class=\"form-group clone\"><label class=\"col-md-3 control-label\">Referrer URL</label><div class=\"col-md-3\"><input name=\"Urls[" + index + "].URL\" class=\"form-control\" type=\"text\"/><input name=\"Urls[" + index + "].PortalId\" value=\"@Model.PortalId\" class=\"hidden\"/></div></div>";
				$('.clone:last').after(content);
				index++;
			});

			$('.deleteUrl').click(function () {
				var id = $(this).data('urlid');
				$.ajax({
					url: '@Url.Action("DeleteUrl", "Portals")',
					type: "GET",
					dataType: "json",
					data: { id: id },
					success: function (data) {
						$('.url' + id).remove();
					}
				});
			});

			$('#editPortalForm').submit(function () {
				if ($('#ImgInput')[0].src.length > 0 || $('#existingImage')[0].src.length > 0) {
					return true;
				}
				alert("You must upload a cover image for the portal");
				return false;
			});
		});
	</script>
}
